<template>
<div id="homelist">
    

    <van-tabs ref="tabs"  class="re-tab" v-model:active="active" @click="onChangeTab">
    <van-tab v-for="(item, index) in cate"  :title="item.name" :key="index"  >
    </van-tab>
    </van-tabs>

  
        <div class="content">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    @offset="10"
                >

                    <van-grid :gutter="8" :column-num="2" class="mid">
                    <van-grid-item v-for="(item,index) in list" :key="index" @click="goTo(item.id)" 
                    :icon="item.cover_url" :text="item.title"/>
                    </van-grid>
                                
                    
                </van-list>
            </van-pull-refresh>
        </div>
    
</div>
</template>

<script>
import {toRefs,reactive,onMounted,ref } from 'vue';
import { getCategory} from 'network/goods';
import {useRouter} from 'vue-router';

export default {
    name:'HomeList',

    setup() {
        const active = ref(0);
        const router = useRouter();
        let tabs = ref(null);
        const state = reactive({
            loading:false,
            finished:false,
            refreshing:false,
            list:[],
            cate:[],
            page:1,
            totalPage:0,
            category_id:0,
        });

        onMounted(()=>{
            onRefresh();  //初始化
        })


        //多次加载  
        const loadDate = () =>{
            getCategory(state.category_id,state.page).then(res=>{              
                state.list = state.list.concat(res.goods.data);
                state.cate = res.categories;
                state.loading=false;
                state.totalPage = res.goods.next_page_url;
                if(res.goods.next_page_url == null) {  //如果数据下一页为空 就执行下面不要再加载了
                    state.finished = true;   //下拉加载再多 加上就是 加载完就不再滚动
                }

            })
        }

        const onLoad = () => {

            if(!state.refreshing && state.totalPage != null){     //如果数据下一页不为空，再执行下拉加1   !state.refreshing如果上拉加载更多是假取反
                state.page = state.page  + 1 ;
            }


            if(state.refreshing){
                state.list = [];
                state.refreshing = false;
            }
            loadDate();
        };

        const onRefresh = () => {
            //是否处于加载状态，加载过程中不触发load事件
            state.refreshing = true;
            // 清空列表数据
            state.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            state.loading = true;

            state.page = 1;
            onLoad();
        };

        //切换顶部tab
        const onChangeTab = (name) =>{ 
            state.category_id = name;
            onRefresh();
        }


  
        
        const goTo =(id)=>{
            router.push({path:'/detail',query:{id:id}})
        }


        return { 
            active,
            ...toRefs(state),
            onLoad,
            onRefresh,
            tabs,
            onChangeTab,
            goTo
        };
    },

    
}
</script>

<style scoped lang="scss">

#homelist{
    margin-top: 15px;
    margin-bottom: 100px; 
}

.re-tab {
    margin-top: 1px;
    position:sticky;
    top:45px !important;
    z-index: 999;
    margin-bottom: 0px;
}
</style>

<style lang="scss">
.van-tabs__line {
  background-color: var(--color-tint) !important;
}
.van-icon__image {
    width:100% !important;
    height:auto !important;
}

  .van-tab--active{
    
    font-size: 16px;
    color: rgb(105, 48, 197);
}

</style>